<template>
  <div class="list">
    <img :src="item.cover_img" alt="" />
    <div class="detail">
      <div class="top">
        <p>
          <span class="iconfont icon-wodeyouhuiquan"></span> {{ item.name }}
        </p>
        <p class="p">作者：{{ item.instruction }}</p>
      </div>
      <p>
        <span class="red">{{ item.price / 100 + ".00" == 0.00 ?'免费': item.price / 100 + ".00"}}</span>
        <s>{{ item.underlined_price / 100 + ".00" }}</s>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  data() {
    return {};
  },
  mounted() {
      // console.log(this.item);
  },
  methods: {
     add(item){
      console.log(item);
      this.$emit("add",item)
    }
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.list {
  width: 90%;
  height: 120px;
  display: flex;
  padding: 0 20px;
  align-items: center;
  box-shadow: 1px 1px 1px 1px #eee;
  border-radius: 8px;
  margin: 10px auto;
  background-color: #fff;
  img {
    width: 30%;
    height: 80%;
    margin-right: 15px;
  }
  .detail {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    font-size: 16px;
    .icon-wodeyouhuiquan {
      color: orangered;
      padding-right: 5px;
      font-size: 20px;
    }
    .p {
      color: #aaa;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical; /* 设置对齐模式 */
      -webkit-line-clamp: 1; //多行文本溢出隐藏
    }
    .red {
      color: orangered;
    }
    s {
      color: #aaa;
      padding-left: 10px;
    }
  }
}
</style>
